import * as React from 'react';
import Drawer from '@mui/material/Drawer';
import { Avatar, Box, List, ListItemButton, ListItemIcon, ListItemText } from '@mui/material';
import SendIcon from '@mui/icons-material/Send';
import SettingsIcon from '@mui/icons-material/Settings';
import DocumentScannerIcon from '@mui/icons-material/DocumentScanner';
import NotInterestedIcon from '@mui/icons-material/NotInterested';
import ExitToAppIcon from '@mui/icons-material/ExitToApp';
import UpdateIcon from '@mui/icons-material/Update';
import InfoIcon from '@mui/icons-material/Info';
import avatar from "@assets/icon/header/avatar.jpg"

interface PersonalInfoProps {
    personDrawer: boolean;
    setPersonDrawer: React.Dispatch<React.SetStateAction<boolean>>;
}

const PersonalInfo: React.FC<PersonalInfoProps> = ({ personDrawer, setPersonDrawer }) => {


    return (
        <React.Fragment>
            <Drawer
                PaperProps={{
                    sx: {
                        width: '300px',
                        padding: '10px'
                    },
                }}
                anchor={'right'}
                open={personDrawer}
                onClose={() => setPersonDrawer(false)}
            >
                <Box sx={{
                    display: 'flex',
                    justifyContent: 'center',
                    borderBottom: '1px dotted #cccc',
                    paddingBottom: '40px'
                }}  >
                    <Avatar src={avatar}></Avatar>
                </Box>
                <List
                    sx={{ width: '100%', bgcolor: 'background.paper' }}
                    component="nav"
                    aria-labelledby="nested-list-subheader"
                >
                    <ListItemButton sx={{
                        height: '50px',    
                        padding: '20px 16px', 
                    }}  >
                        <ListItemIcon>
                            <SendIcon />
                        </ListItemIcon>
                        <ListItemText primary="Sent mail" />
                    </ListItemButton>
                    <ListItemButton sx={{
                        height: '50px',      
                        padding: '20px 16px', 
                    }}  >
                        <ListItemIcon>
                            <SettingsIcon />
                        </ListItemIcon>
                        <ListItemText primary="设置" />
                    </ListItemButton>
                    <ListItemButton sx={{
                        height: '50px',      
                        padding: '20px 16px', 
                    }}  >
                        <ListItemIcon>
                            <DocumentScannerIcon />
                        </ListItemIcon>
                        <ListItemText primary="操作指南" />
                    </ListItemButton>
                    <ListItemButton sx={{
                        height: '50px',      
                        padding: '20px 16px', 
                    }}  >
                        <ListItemIcon>
                            <NotInterestedIcon />
                        </ListItemIcon>
                        <ListItemText primary="清除缓存" />
                    </ListItemButton>
                    <ListItemButton sx={{
                        height: '50px',      
                        padding: '20px 16px', 
                    }}  >
                        <ListItemIcon>
                            <UpdateIcon />
                        </ListItemIcon>
                        <ListItemText primary="软件更新" />
                    </ListItemButton>
                    <ListItemButton sx={{
                        height: '50px',      
                        padding: '20px 16px', 
                    }}  >
                        <ListItemIcon>
                            <InfoIcon />
                        </ListItemIcon>
                        <ListItemText primary="关于我们" />
                    </ListItemButton>
                    <ListItemButton sx={{
                        height: '50px',      
                        padding: '20px 16px', 
                    }}  >
                        <ListItemIcon>
                            <ExitToAppIcon />
                        </ListItemIcon>
                        <ListItemText primary="退出登录" />
                    </ListItemButton>
                </List>
            </Drawer>
        </React.Fragment>
    );
};

export default PersonalInfo;